import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { SliderValue, WySliderStyle } from './wy-slider-types';

@Component({
  selector: 'app-wy-slider-track',
  template: '<div class="wy-slider-track"  [class.buffer]="wyBuffer" [ngStyle]="style"></div>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WySliderTrackComponent implements OnInit, OnChanges {
  @Input() wyVertical = false;
  @Input() wyLength: SliderValue = 0;
  @Input() wyBuffer = false;
  
  style:WySliderStyle = {}
  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['wyLength']){
      if(this.wyVertical){
        this.style = {
          height:(this.wyLength || 0) + '%',
          left:null,
          width:null,
        }
      }else{
        this.style = {
          width:(this.wyLength || 0) + '%',
          height:null,
          bottom:null,
        }
      }
    }
  }
  ngOnInit(): void {
  }

}
